<template>
  <el-dialog v-model="dialogVisible" title="提示" width="40%">
    <span>确定对[id={{ ids }}]进行[删除]操作？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="del_s()"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <div v-show="flags" class="Mask_layer">
    <div class="div_ipt">
      <div class="close_div">
        <span>{{ titles == "新增" ? "新增" : "编辑" }}</span
        ><span
          class="hoverhe"
          @click="
            () => {
              flags = false;
            }
          "
          >X</span
        >
      </div>
      <div class="paramster_ipts">
        <div class="ips_childrens">
          <span>参数名</span
          ><input
            type="text"
            placeholder="参数名"
            v-model="user"
            @input="(e) => onchangs('参数名', e)"
          />
        </div>
        <div class="ips_childrens">
          <span>参数名</span
          ><input
            type="text"
            placeholder="参数值"
            v-model="usernum"
            @input="(e) => onchangs('参数值', e)"
          />
        </div>
        <div class="ips_childrens">
          <span>备注</span
          ><input
            type="text"
            placeholder="备注"
            v-model="usertext"
            @input="(e) => onchangs('备注', e)"
          />
        </div>
      </div>
      <div class="footers">
        <span
          @click="
            () => {
              flags = false;
            }
          "
          >取消</span
        >
        <span class="blues" @click="add_lists()">确定</span>
      </div>
    </div>
  </div>
  <div class="param">
    <div class="tops">
      <div class="labels">
        <span>参数名 </span>
        <input
          type="text"
          placeholder="参数名"
          class="ipts"
          v-model="search_value"
        />
      </div>
      <el-button type="primary" :icon="Search" @click="search()"
        >搜索</el-button
      >
      <el-button
        type="primary"
        :icon="Delete"
        color="white"
        border="true"
        @click="del_All()"
        >清空</el-button
      >
    </div>
    <avue-crud
      :option="option"
      :data="data"
      ref="crud"
      v-model:page="page"
      @on-load="onLoad"
      @selection-change="selectionChange"
    >
      <template #menu-left="{ size }">
        <el-button type="primary" :size="size" @click="addlist()"
          >新增</el-button
        >
        <el-button type="primary" :size="size" @click="numdel()"
          >批量删除</el-button
        >
      </template>
      <template #menu="{ row, index, size }">
        <el-button
          type="danger"
          :size="size"
          icon="el-icon-edit"
          @click="rowEdit(row, index)"
          >编辑</el-button
        >
        <el-button
          type="success"
          :size="size"
          icon="el-icon-delete"
          @click="rowDels(row, index)"
          >删除</el-button
        >
      </template>
    </avue-crud>
  </div>
</template>
<script  lang="ts" setup>
import { Delete, Edit, Search, Share, Upload } from "@element-plus/icons-vue";
import { useCounterStore } from "../../../../store/index";
import { useRouter } from "vue-router";

import {
  ref,
  reactive,
  toRefs,
  onBeforeMount, // 在组件挂载之前执行的函数
  onMounted,
  onBeforeUpdate, // 在组件修改之前执行的函数
  onUpdated,
  onBeforeUnmount, // 在组件卸载之前执行的函数
  onUnmounted,
} from "vue";

let flags = ref(false);
let titles = "新增";
const Routes = useRouter();
const dialogVisible = ref(false);
const store = useCounterStore();
let ids = ref(0);
let user = ref("");
let page_num = ref(0);
let usernum = ref("");
let usertext = ref("");
let data: any = ref(store.parameter_list);
let page: any = {
  pageSize: 5,
  pageSizes: [5, 10],
};
let search_value = ref("");
const option: any = {
  columnBtn: false,
  addBtn: false,
  border: true,
  selection: true,
  reserveSelection: true,
  delBtn: false,
  editBtn: false,
  align: "center",
  menuAlign: "center",
  column: [
    {
      label: "参数名",
      prop: "paramKey",
    },
    {
      label: "参数值",
      prop: "paramValue",
    },
    {
      label: "备注",
      prop: "remark",
    },
    {
      label: "",
      prop: "",
    },
  ],
};

const del_s = () => {
  let delarr = store.numsdels;
  axios({
    method: "DELETE",
    url: "https://yami-admin-api.yiluxdeng.com/sys/config",
    data: [ids.value],
    headers: {
      Authorization:
        "b9z1ZoWDim/AxMjOFy5m1ngFzaOni5SLpWJljf2ponwup+Ia5dmVetciuUGDmF+G",
    },
  }).then((res) => {
    setTimeout(() => {
      get_lists();
    }, 1000);
  });
  dialogVisible.value = false;
};
const onLoad = (page: any) => {
  //模拟分页
  page.total = page_num;
  axios({
    method: "get",
    url: `https://yami-admin-api.yiluxdeng.com/sys/config/page?t=${new Date().getTime()}&current=${
      page.currentPage
    }&size=${page.pageSize}`,
    headers: {
      Authorization:
        "b9z1ZoWDim/AxMjOFy5m1ngFzaOni5SLpWJljf2ponwup+Ia5dmVetciuUGDmF+G",
    },
  }).then((res) => {
    data.value = res.data.records;
    page_num.value = res.data.total;
    addAgePatch(res.data.records);
  });
};

const del_All = () => {
  search_value.value = "";
};
const get_lists = () => {
  axios({
    method: "get",
    url: `https://yami-admin-api.yiluxdeng.com/sys/config/page?t=${new Date().getTime()}&current=${
      page.currentPage
    }&size=${page.pageSize}`,
    headers: {
      Authorization:
        "b9z1ZoWDim/AxMjOFy5m1ngFzaOni5SLpWJljf2ponwup+Ia5dmVetciuUGDmF+G",
    },
  }).then((res) => {
    data.value = res.data.records;
    page_num.value = res.data.total;
    addAgePatch(res.data.records);
  });
};

const onchangs = (value, evalue) => {
  if (value == "参数名") {
    user.value = evalue.target.value;
  } else if (value == "参数值") {
    usernum.value = evalue.target.value;
  } else if (value == "备注") {
    usertext.value = evalue.target.value;
  } else {
    return;
  }
};
const rowEdit = (row, index) => {
  //编辑

  ids.value = row.id;
  user.value = row.paramKey;
  usernum.value = row.paramValue;
  usertext.value = row.remark;
  flags.value = true;
  titles = "编辑";
};
const add_lists = () => {
  //新增or编辑
  if (titles == "新增") {
    axios({
      method: "POST",
      url: "https://yami-admin-api.yiluxdeng.com/sys/config",
      data: {
        paramKey: user.value,
        paramValue: usernum.value,
        remark: usertext.value,
        t: new Date().getTime(),
      },
      headers: {
        Authorization:
          "b9z1ZoWDim/AxMjOFy5m1ngFzaOni5SLpWJljf2ponwup+Ia5dmVetciuUGDmF+G",
      },
    });
  } else if (titles == "编辑") {
    axios({
      method: "put",
      url: "https://yami-admin-api.yiluxdeng.com/sys/config",
      data: {
        id: ids.value,
        paramKey: user.value,
        paramValue: usernum.value,
        remark: usertext.value,
        t: new Date().getTime(),
      },
      headers: {
        Authorization:
          "b9z1ZoWDim/AxMjOFy5m1ngFzaOni5SLpWJljf2ponwup+Ia5dmVetciuUGDmF+G",
      },
    });
  }

  setTimeout(() => {
    get_lists();
  }, 1000);

  flags.value = false;
};
const search = () => {
  //搜索
  axios({
    method: "get",
    url: ` https://yami-admin-api.yiluxdeng.com/sys/config/page?t=${new Date().getTime()}&current=1&size=10&paramKey=${
      search_value.value
    }`,
    headers: {
      Authorization:
        "b9z1ZoWDim/AxMjOFy5m1ngFzaOni5SLpWJljf2ponwup+Ia5dmVetciuUGDmF+G",
    },
  }).then((res) => {
    data.value = res.data.records;
    addAgePatch(res.data.records);
  });
};
const addAgePatch = (data) => {
  store.$patch({
    parameter_list: data,
  });
};
const numdel = () => {
  let delarr = [];
  store.numsdels.forEach((item) => {
    delarr.push(item.id);
  });
  axios({
    method: "DELETE",
    url: "https://yami-admin-api.yiluxdeng.com/sys/config",
    data: delarr,
    headers: {
      Authorization:
        "b9z1ZoWDim/AxMjOFy5m1ngFzaOni5SLpWJljf2ponwup+Ia5dmVetciuUGDmF+G",
    },
  }).then((res) => {
    setTimeout(() => {
      get_lists();
    }, 1000);
  });
};

const rowDels = (row, index) => {
  ids.value = row.id;
  dialogVisible.value = true;
};

onMounted(() => {});
const addlist = () => {
  flags.value = true;
};

const selectionChange = (list) => {
  store.$patch({
    numsdels: list,
  });
};
</script>

<style scoped>
.blues {
  background: rgb(0, 140, 255);
  color: white;
}
.footers {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.footers > span {
  border-radius: 5px;
  margin-right: 20px;
  padding: 12px 20px;
  border: 1px solid #ccc;
}
.ips_childrens {
  display: flex;
  height: 20%;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}
.ips_childrens > input {
  padding: 10px 10px;
  border-radius: 3px;
  /* outline: none; */
  width: 70%;

  border: 1px solid #ccc;
}
.paramster_ipts {
  /* justify-content: space-around; */
  align-content: stretch;

  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 50%;
}
.hoverhe {
  cursor: pointer;
}
.close_div {
  font-size: 18px;
  width: 100%;

  display: flex;
  justify-content: space-between;
}
.close_div > span {
  padding: 20px 20px;
  box-sizing: border-box;
}
.div_ipt {
  width: 50%;
  height: 40vw;
  background: white;
}
.Mask_layer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;

  /* opacity: 1; */
}
.labels .ipts {
  padding-left: 10px;
  box-sizing: border-box;
}
.labels {
  width: 25%;
  padding-left: 10px;
  box-sizing: border-box;
  display: inline-block;
}
.labels > input {
  padding: 10px 0px;
}
.param {
  background: white;
  width: 95%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.tops {
  width: 100%;
  margin-bottom: 10px;
}
.vla {
  width: 200px;
  height: 200px;
  background: green;
}
</style>